<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Welcome!</title>
    <!-- this is a comment -->
    <style>
        /* css comment */
        body {
            background-color: #000;
            background-image: url("90s-bg.png");
            color: #fff;
            /* another css comment */
        }
        /* lol
   a
   css
   comment */

        h1 {
            color: #a00;
        }

        a {
            color: #ae7250;
        }

        a:hover {
            color: #f4cca0;
        }

        span#ua {
            color: red;
        }

        span#loadtime {
            color: yellow;
        }

        .page-list {
            column-width: 250px;
        }
    </style>
    <script>
        console.log('Hello from an inline script in the head of welcome.html');
    </script>
    <script src="welcome.js"></script>
</head>

<body background="90s-bg.png">
    <h1>Welcome to the Ladybird web browser!</h1>
    <p>This is a very simple browser built on the LibWeb and LibJS engines.</p>
    <p>Your user agent is: <b><span id="ua"></span></b></p>
    <p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
    <nav class="page-list">
        <h2>HTML</h2>
        <ul>
            <li><a href="contenteditable.html">contenteditable</a></li>
            <li><a href="many-buggies.html">many buggies</a></li>
            <li><a href="html-escape-test.html">html character escape test</a></li>
            <li><a href="phint.html">presentational hints</a></li>
            <li><a href="lorem.html">lorem ipsum</a></li>
            <li><h3>Elements</h3></li>
            <li><a href="iframe.html">iframe</a></li>
            <li><a href="button.html">button</a></li>
            <li><a href="radio.html">radio button</a></li>
            <li><a href="checkbox.html">checkbox</a></li>
            <li><a href="form.html">form</a></li>
            <li><a href="input.html">input</a></li>
            <li><a href="images.html">images</a></li>
            <li><a href="pre.html">pre</a></li>
            <li><a href="svg.html">svg</a></li>
            <li><a href="svg-transforms.html">svg transforms</a></li>
            <li><a href="svg-gradients.html">svg gradients</a></li>
            <li><a href="svg-preserve-aspect-ratio.html">svg preserveAspectRatio</a></li>
            <li><a href="svg-fill-rule.html">svg fill-rule</a></li>
            <li><a href="small.html">small</a></li>
            <li><a href="link.html">link</a></li>
            <li><a href="afrag.html">links with fragments</a></li>
            <li><a href="blink.html">blink</a></li>
            <li><a href="br.html">br</a></li>
            <li><a href="progressbar.html">progressbar</a></li>
            <li><a href="textarea.html">textarea</a></li>
            <li><a href="noscript.html">noscript</a></li>
        </ul>

        <h2>CSS</h2>
        <ul>
            <li><h3>CSSOM</h3></li>
            <li><a href="attr-invalidate-style.html">Style invalidation on attribute changes</a></li>
            <li><a href="computed-style.html">Computed style</a></li>
            <li><a href="supports.html">CSS.supports() and @supports</a></li>
            <li><a href="attributes.html">Attributes</a></li>
            <li><a href="class-list.html">Class List</a></li>
            <li><h3>Selectors</h3></li>
            <li><a href="selectors.html">Selectors</a></li>
            <li><a href="attrselectors.html">Attribute selectors</a></li>
            <li><a href="more-attribute-selectors.html#target">More attribute selectors</a></li>
            <li><a href="first-child.html">:first-child</a></li>
            <li><a href="last-child.html">:last-child</a></li>
            <li><a href="nth-child.html">:nth-child</a></li>
            <li><a href="nth-last-child.html">:nth-last-child</a></li>
            <li><a href="only-child.html">:only-child</a></li>
            <li><a href="first-of-type.html">:first-of-type</a></li>
            <li><a href="last-of-type.html">:last-of-type</a></li>
            <li><a href="nth-of-type.html">:nth-of-type</a></li>
            <li><a href="nth-last-of-type.html">:nth-last-of-type</a></li>
            <li><a href="empty.html">:empty</a></li>
            <li><a href="root.html">:root</a></li>
            <li><a href="is-selector.html">:is()</a></li>
            <li><a href="not-selector.html">:not()</a></li>
            <li><a href="where-selector.html">:where()</a></li>
            <li><a href="hover.html">:hover</a></li>
            <li><a href="focus.html">:focus</a></li>
            <li><h3>Properties</h3></li>
            <li><a href="gradients.html">Gradients</a></li>
            <li><a href="vertical-align.html">vertical-align</a></li>
            <li><a href="backdrop-filter.html">backdrop-filter</a></li>
            <li><a href="backgrounds.html">Backgrounds</a></li>
            <li><a href="background-repeat-test.html">Background-repeat</a></li>
            <li><a href="background-position-xy.html">Background-position-x/y</a></li>
            <li><a href="box-shadow.html">Box-shadow</a></li>
            <li><a href="text-shadow.html">Text-shadow</a></li>
            <li><a href="opacity.html">Opacity</a></li>
            <li><a href="text-decoration.html">Text-decoration</a></li>
            <li><a href="fonts.html">Fonts</a></li>
            <li><a href="borders.html">Borders</a></li>
            <li><a href="border-radius.html">Border-Radius</a></li>
            <li><a href="outline.html">Outlines</a></li>
            <li><a href="lists.html">Lists</a></li>
            <li><a href="flex.html">Flexboxes</a></li>
            <li><a href="flex-order.html">Flexbox order</a></li>
            <li><a href="justify-content.html">Flexbox justify-content</a></li>
            <li><a href="flex-2.html">Flexboxes with unusual children</a></li>
            <li><a href="inline-block.html">display: inline-block;</a></li>
            <li><a href="display-grid.html">display: grid;</a></li>
            <li><a href="display-table.html">display: table;</a></li>
            <li><a href="inline-block-link.html">link inside display: inline-block</a></li>
            <li><a href="padding-inline.html">inline elements with padding</a></li>
            <li><a href="custom-properties.html">Custom Properties</a></li>
            <li><a href="float-1.html">Floating boxes</a></li>
            <li><a href="float-3.html">Floating boxes with overflow=hidden</a></li>
            <li><a href="clear-1.html">Float clearing</a></li>
            <li><a href="overflow.html">Overflow</a></li>
            <li><a href="image-rendering.html">image-rendering property</a></li>
            <li><a href="transform.html">Transforms</a></li>
            <li><a href="clip.html">Clip</a></li>
            <li><a href="cursor.html">Cursor</a></li>
            <li><a href="accent-color.html">accent-color</a></li>
            <li><h3>Features</h3></li>
            <li><a href="css.html">Basic functionality</a></li>
            <li><a href="colors.html">css colors</a></li>
            <li><a href="palette.html">system palette color css extension</a></li>
            <li><a href="calc.html">calc()</a></li>
            <li><a href="css-import.html">@import</a></li>
            <li><a href="media-queries.html">@media queries</a></li>
            <li><a href="font-face.html">@font-face</a></li>
            <li><a href="margin-collapse-1.html">margin collapsing 1</a></li>
            <li><a href="margin-collapse-2.html">margin collapsing 2</a></li>
            <li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li>
            <li><a href="link-over-zindex-block.html">link elements with background box placed with z-index</a></li>
            <li><a href="percent-css.html">Percentage values</a></li>
            <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li>
            <li><a href="cascade-keywords.html">Cascade keywords (initial, inherit, unset)</a></li>
            <li><a href="inline-node.html">Styling "inline" elements</a></li>
            <li><a href="pseudo-elements.html">Pseudo-elements (::before, ::after, etc)</a></li>
            <li><a href="effects_with_opacity_and_transforms.html">Effects with opacity and transforms</a></li>
            <li><a href="css-animations.html">CSS Animations</a></li>
        </ul>

        <h2>JavaScript/Wasm</h2>
        <ul>
            <li><a href="mouse-events.html">mouse events</a></li>
            <li><a href="message-channel.html">MessageChannel</a></li>
            <li><a href="websocket.html">WebSocket API Test</a></li>
            <li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
            <li><a href="raf.html">requestAnimationFrame</a></li>
            <li><a href="events.html">simple DOM events</a></li>
            <li><a href="dom.html">simple DOM JS</a></li>
            <li><a href="alert.html">alert()</a></li>
            <li><a href="prompt.html">prompt()</a></li>
            <li><a href="qsa.html">querySelectorAll()</a></li>
            <li><a href="innerHTML.html">innerHTML()</a></li>
            <li><a href="demo.html">fun demo</a></li>
            <li><a href="set-timeout-and-interval.html">setTimeout() and setInterval()</a></li>
            <li><a href="location.html">window.location property</a></li>
            <li><a href="script-preparation-test.html">Test for the early return steps 6-8 of the "prepare a script" algorithm</a></li>
            <li><a href="async-js.html">Basic test for async functions and their integration with the LibWeb event loop</a></li>
            <li><a href="worker_parent.html">Workers</a></li>
            <li><a href="storage.html">Web Storage API</a></li>
            <li><a href="private-element-test.html">Test for rejecting private elements on special objects</a></li>
            <li><a href="exceptions.html">Exceptions</a></li>
            <li><h3>Canvas</h3></li>
            <li><a href="canvas.html">canvas 2D test</a></li>
            <li><a href="canvas-gradients.html">canvas gradients!</a></li>
            <li><a href="canvas-patterns.html">canvas patterns</a></li>
            <li><a href="canvas-rotate.html">canvas rotate()</a></li>
            <li><a href="canvas-path-rect.html">canvas path rect test</a></li>
            <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
            <li><a href="img-canvas.html">canvas drawImage() test</a></li>
            <li><a href="canvas-path.html">canvas path house!</a></li>
            <li><a href="canvas-clip-path.html">canvas clip paths</a></li>
            <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
            <li><a href="canvas-global-alpha.html">canvas globalAlpha</a></li>
            <li><a href="canvas-path2d.html">Path2D</a></li>
            <li><a href="web-animations.html">Web Animations</a></li>
            <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
            <li><h3>Wasm</h3></li>
            <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>
            <li><a href="gol-wasm.html">WebAssembly Game Of Life Demo</a></li>
        </ul>

        <h2>Image Formats</h2>
        <ul>
            <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
            <li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li>
            <li><a href="pngsuite_int_png.html">pngsuite interlacing test</a></li>
            <li><a href="https://entropymine.com/jason/bmpsuite/bmpsuite/html/bmpsuite.html">BMP test suite</a></li>
            <li><a href="jpg.html">JPG Images</a></li>
            <li><a href="gifsuite.html">GIF test suite</a></li>
            <li><a href="ddssuite.html">DDS test suite</a></li>
            <li><a href="pbmsuite.html">PBM test suite</a></li>
            <li><a href="pgmsuite.html">PGM test suite</a></li>
            <li><a href="ppmsuite.html">PPM test suite</a></li>
            <li><a href="data-url.html">"data:..." images</a></li>
        </ul>

        <h2>Test Sites</h2>
        <ul>
            <li><a href="acid1.html">acid1</a></li>
            <li><a href="acid2.html">acid2</a></li>
            <li><a href="http://serenityos.org/">serenityos.org</a></li>
        </ul>
    </nav>
    <script>
        queueMicrotask(function() {
            document.getElementById("loadtime").innerHTML = performance.now();
        });
    </script>
</body>

</html>
